<!--
 * @Author: Penk
 * @LastEditors: Penk
 * @LastEditTime: 2023-10-13 10:09:15
 * @FilePath: \web-interview-questions\路由\hash路由.html
 * @email: 492934056@qq.com
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <title>Document</title>
  <style>
    .codeBox {
      background-color: black;
      padding: 10px;
      color: white;
    }
  </style>
</head>

<body style="margin-top: 50px; margin-left: 50px">
  <main>
    <button id="hashBtn">随机hash路由</button>
    <br />
    <span style="color: red; font-size: 12px">打开控制台可以看数据</span>

    <p>hash的监听：</p>
    <div class="codeBox">
      <code>
          window.addEventListener("hashchange", (e) => {
          <br />
          &nbsp;&nbsp; console.log("hash:", location.hash);
          <br />
          });
        </code>
    </div>

    <p>hash的变化方式：</p>
    <ul>
      <li>通过浏览器输入栏手动输入网址来达到修改</li>
      <li>通过浏览器的前进后退方式</li>
      <li>JS的方式location.href="#/xxx"</li>
    </ul>

    <p>特点：</p>
    <ul>
      <li>
        url后面写#锚点，由于 hash 值变化不会导致浏览器向服务器发出请求，而且
        hash 改变会触发 hashchange 事件（hashchange只能改变 #
        后面的url片段）。
      </li>
      <li>
        因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了，所以人们在
        html5 的 history 出现前，基本都是使用 hash 来实现前端路由的。
      </li>
    </ul>
  </main>

  <script>
    // 监听hash模式
    window.addEventListener("hashchange", (e) => {
      console.log("hash:", location.hash);
    });

    //  点击
    $("#hashBtn").click((e) => {
      location.href = "#/user" + Math.floor(Math.random() * 100);
    });
  </script>
</body>

</html>